<template>
	<view class="searchPage">
		<view class="searchTop">
			<view class="searchTopLeft">
				<image class="searchLogo" src="../../static/dongtai/dongtaied.png"></image>
				<input class="searchInput" @input="onKeyInput" type="text" v-model="search" placeholder="请输入ID号/用户名">
			</view>
			<view class="searchTopRight" @click="goback">
				取消
			</view>
		</view>
		<view class="searchXian"></view>
		<view class="dynamiBox" v-for="(item,index) in searchList" :key="index">
			<view class="flexItemMain">
				<image class="flexItemLeftImg" :src="item.avatar" mode="" @click="toPage(item)"></image>
				<view class="flexItemCenter">
					<view class="flexItemCenterTop">{{item.nickname}}</view>
					<view class="flexItemCenterBottom" v-if="item.sex==2">
						<image style="vertical-align: middle;    margin-top: -2px;" class="sexImg"
							src="../../static/dongtai/sex.png"></image>
						<text>{{item.age}}</text>
					</view>
					<view class="flexItemCenterBottom2" style="vertical-align: middle;    margin-top: -2px;"
						v-if="item.sex==1">
						<image class="sexImg" src="../../static/pages/sex.png"></image>
						{{item.age}}
					</view>
					<!-- <view class="flexItemCenterBottom dizhi">
							珠海
						</view> -->
				</view>
			</view>
			<view class="xian"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
				searchList: []
			}
		},
		methods: {
			toPage(item) {
				uni.redirectTo({
					url: '/pages/my/mydongtai?id=' + item.id
				})
			},
			onKeyInput: function(event) {
				this.search = event.target.value
				if (this.search) {
					if (this.isRealNum(this.search)) {
						this.getuser(this.search)
					} else {
						this.getSearchList()
					}
				}
			},
			getSearchList() {
				let that = this
				this.$utils.postrequest("/api/search", {
					search: that.search
				}, function(res) {
					if (res.code == 200) {
						if (res.data.length > 0) {
							res.data.forEach(item => {
								let avatar = JSON.parse(item.avatar)
								item.avatar = avatar.shift()
							})
						}
						that.searchList = res.data
					}
				})
			},
			goback() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getuser(id) {
				let that = this
				this.$utils.postrequest("/api/getuser", {
					user_id: id
				}, function(res) {
					if (res.code == 200) {
						if (res.data && !Array.isArray(res.data)) {
							that.searchList = [res.data]
						} else {
							that.searchList = []
						}
					}
				})
			},
			isRealNum(val) {
				// isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除，
				if (val === "" || val == null) {
					return false;
				}
				if (!isNaN(val)) {
					//对于空数组和只有一个数值成员的数组或全是数字组成的字符串，isNaN返回false，例如：'123'、[]、[2]、['123'],isNaN返回false,
					//所以如果不需要val包含这些特殊情况，则这个判断改写为if(!isNaN(val) && typeof val === 'number' )
					return true;
				} else {
					return false;
				}
			}
		}
	}
</script>

<style scoped>
	.searchPage {
		background-color: #fff;
	}

	.searchTop {
		display: flex;
		align-items: center;
		margin-top: 96rpx;

	}

	.searchTopLeft {
		background: #F5F5F7;
		border-radius: 6rpx;
		flex: auto;
		display: flex;
		align-items: center;
		height: 78rpx;
		margin-left: 32rpx;
	}

	.searchLogo {
		width: 26rpx;
		height: 27rpx;
		margin-left: 29rpx;
		margin-right: 22rpx;
	}

	.searchInput {
		font-size: 28rpx;

		color: #A6A4B2;
	}

	.searchTopRight {
		flex: none;
		font-size: 28rpx;

		color: #8479BB;
		margin-left: 32rpx;
		margin-right: 44rpx;
	}

	.searchXian {
		height: 1rpx;
		background: #E0E0E0;
		margin-top: 15rpx;
		margin-bottom: 20rpx;
	}

	.flexItemMain {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flexItemLeft {
		flex: none;
		border-radius: 100%;
		overflow: hidden;
		width: 60rpx;
		height: 60rpx;
		margin-left: 30rpx;
		margin-right: 20rpx;
	}

	.flexItemLeftImg {
		border-radius: 100%;
		flex: none;
		width: 110rpx;
		height: 110rpx;
		margin-left: 31rpx;
		margin-right: 15rpx;
	}

	.flexItemLeft image {
		width: 100%;
		height: 100%;
	}

	.flexItemCenter {
		flex: auto;
		text-align: left;
	}

	.flexItemCenterTop {
		font-size: 28rpx;
		font-weight: bold;
		color: #2B2937;
	}

	.flexItemCenterBottom {
		color: #fff;
		font-size: 14rpx;
		display: inline-block;
		padding-right: 16rpx;
		height: 33rpx;
		background: linear-gradient(-86deg, #FF8AB4, #FD73A3);
		border-radius: 17rpx;
		display: flex;
		width: 50rpx;
		align-items: center;
	}

	.flexItemCenterBottom2 {
		color: #fff;
		font-size: 14rpx;
		display: inline-block;
		padding-right: 16rpx;
		height: 33rpx;
		border-radius: 17rpx;
		background: linear-gradient(-90deg, #5FCAFF, #5B8DFE);
		display: flex;
		width: 50rpx;
		align-items: center;
	}

	.sexImg {
		width: 20rpx;
		height: 20rpx;
		margin-left: 12rpx;
		margin-right: 4rpx;
	}

	.dizhi {
		margin-left: 10rpx;
		text-align: center !important;
		padding-left: 15rpx;
	}

	.flexItemRight {
		flex: none;
		font-weight: bold;
		font-size: 14rpx;
	}

	.flexItemRightImg {
		width: 152rpx;
		height: 79rpx;
		flex: none;
		margin-right: 31rpx;
	}

	.zhanwei {
		font-size: 23rpx;
		font-family: PingFang SC;
		font-weight: bold;
		padding-left: 33rpx;
		color: #A3A4AD;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		background: #F6F5FA;
		margin-bottom: 24rpx;
	}

	.xian {
		margin: 22rpx 0rpx 24rpx 30rpx;
		height: 2rpx;
		background: #DDDDDD;
	}
</style>
